<template>
  <section class="content">
    <div class="box box-info">
      <div class="box-header with-border">
        <h3 class="box-title">出库管理</h3>
      </div>
      <div class="form-horizontal">
        <div class="box-body">
          <div class="clearfix row">
            <div class="col-sm-12 flex" style="align-items: initial">
              <label class="min-width bg-gray control-label">仓库位置：</label>

              <div class="inline-block">
                <div v-if="warehouseList.length == 0">
                  <label class="payment">
                    <i class="fa fa-warning"></i>
                    您当前还未添加仓库
                    <router-link to="/v1/goods/category/getList" class="text-red text-bold">【立即添加】</router-link>
                  </label>
                </div>
                <div v-else>
                  <button type="button" class="btn btn-default btn-flat m-r-10 pull-left m-b-20"
                          @click="chooseOutboundWh(null,-1)"
                          :class='[{ "btn-info" :activeOutboundWh == -1}]'>全部
                  </button>
                  <button v-for="(warehouseItem, index) in warehouseList" type="button"
                          class="btn btn-default btn-flat m-r-10 m-b-20"
                          :class='[{ "btn-info" :index==activeOutboundWh}]'
                          @click="chooseOutboundWh(warehouseItem.id,index)">{{warehouseItem.name}}
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="clearfix row">
            <div class="col-sm-12 flex" style="align-items: initial">
              <label class="min-width bg-gray control-label">出库状态：</label>

              <div class="inline-block">
                <button v-for="(outboundStateItem, index) in outboundState" type="button"
                        class="btn btn-default btn-flat m-r-10 m-b-20"
                        :class='[{ "btn-info" :index==activeOutboundState}]'
                        @click="chooseOutboundStatus(index,outboundStateItem.status)">{{outboundStateItem.name}}
                </button>
              </div>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-12 flex">
              <label class="min-width bg-gray control-label">输入搜索：</label>

              <div class="inline-block">
                <input type="text" v-model.trim="outboundParam.outNum" class="form-control pull-left" style="width: 350px;"
                       placeholder="请输入出库单编号">
                <button class="btn bg-green pull-left m-lr-10" v-if="$_has('sys:whout:list')"
                        @click="searchOutboundByNum">搜索
                </button>
                <button class="btn btn-danger pull-left m-lr-10" @click="resetOutBound">重置</button>
              </div>
            </div>
          </div>
        </div>
        <!-- /.box-body -->

        <!-- /.box-footer -->
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <div class="box box-info">
          <div class="box-header with-border">
            <h3 class="box-title">出库列表</h3>
            <!--<button type="button" class="btn btn-success pull-right m-r-10" v-if="$_has('sys:whout:print')">打印出库单-->
            <!--</button>-->
            <!--<button type="button" class="btn btn-success pull-right m-r-10" v-if="$_has('sys:whout:in')">导入</button>-->
            <!--<button type="button" class="btn btn-success pull-right m-r-10" v-if="$_has('sys:whout:out')">导出</button>-->
            <button type="button" class="btn btn-primary pull-right m-r-10" data-toggle="modal"
                    data-target="#modal-create" @click="toCreate()" v-if="$_has('sys:whout:add')">创建出库单
            </button>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <table id="example3" class="table table-bordered table-hover">
              <div class="overlay" v-if="show">
                <i class="fa fa-refresh fa-spin"></i>
              </div>
              <thead>
              <tr>
                <!--<th>-->
                  <!--<label>-->
                    <!--<input type="checkbox" class="flat-red">-->
                  <!--</label>-->
                <!--</th>-->
                <th>出库单编号</th>
                <th>仓库</th>
                <th>出库类型</th>
                <th style="width:40%">出库依据</th>
                <th>状态</th>
                <th style="width: 20%">操作</th>
              </tr>
              </thead>
              <tbody>
              <tr v-if="outboundList.length == 0">
                <td colspan="7" class="text-center">
                  没有数据
                </td>
              </tr>
              <tr v-else ref="trItem" v-for="(outboundItem, index) in outboundList" :key="index">
                <!--<td v-if="outboundList.length==2" colspan="outboundList.length">没有数据</td>-->
                <!--<td>-->
                  <!--<label>-->
                    <!--<input type="checkbox" v-model='checkList' @click="checkedItem($event)"-->
                           <!--:value="outboundItem.outNum">-->
                  <!--</label>-->
                <!--</td>-->
                <td>{{outboundItem.outNum}}</td>
                <td>{{outboundItem.whName}}</td>
                <td>{{returnOutboundType(outboundItem.outType)}}</td>
                <td v-if="outboundItem.voucher !== null">{{outboundItem.voucher}}</td>
                <td v-else> -</td>
                <td
                  :class='[{ "text-red" : outboundItem.outStatus == 1},{ "text-green" : outboundItem.outStatus != 1}]'>
                  {{returnOutboundStatus(outboundItem.outStatus)}}
                </td>
                <td>
                  <div class="flex">
                    <span style="flex: 1">
                      <a class="text-green" @click="toOutConfirm(outboundItem.outNum)" data-toggle="modal"
                         data-target="#modal-confirm" v-if="outboundItem.outStatus==1 && $_has('sys:whout:okout')">确认出库</a>
                    </span>
                    <span style="flex: 1">
                      <a class="text-green" @click="toEdit(outboundItem.outNum)" data-toggle="modal"
                         data-target="#modal-create" v-if="outboundItem.outStatus !=2 && outboundItem.outStatus !=3 && outboundItem.outType!=2 && $_has('sys:whout:edit')">编辑</a>
                    </span>
                    <span style="flex: 1">
                      <a @click="outCancel(outboundItem.outNum)" class="text-green"
                         v-if="outboundItem.outType!=2 && outboundItem.outStatus == 1 && $_has('sys:whout:del')">取消</a>
                    </span>
                    <span style="flex: 1">
                      <a class="text-green" @click="toEdit(outboundItem.outNum)" data-toggle="modal"
                         data-target="#modal-detail" v-if="$_has('sys:whout:detail')">详情</a>
                    </span>
                  </div>
                </td>
              </tr>
              </tbody>
            </table>

            <div class="clearfix"  v-if="outboundList.length != 0">
              <div class="m-t-15 pull-right">
                <pagination :total="pages.outboundPageList.total" :current-page='pages.outboundPageList.pageNum'
                            @pagechange="pagechange"></pagination>
              </div>
            </div>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->

      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->
    <div class="modal fade" id="modal-create">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" v-if="!!editNo">修改出库单</h4>
            <h4 class="modal-title" v-else>创建出库单</h4>
          </div>
          <div class="modal-body">
            <div class="form-horizontal max_height">
              <div class="clearfix">
                <div class="form-group">
                  <div class="col-sm-4 flex" v-if="editNo">
                    <label  class="control-label bg-gray min-width">出库单编号：</label>
                    <label  class="control-label">{{editNo}}</label>
                  </div>
                  <div class="col-sm-4 flex">
                    <label  class="min-width bg-gray control-label">出库类型：</label>
                    <label  class="control-label">{{returnOutboundType("3")}}</label>
                  </div>
                  <div class="col-sm-4 flex">
                    <label  class="min-width bg-gray control-label"><sup class="text-red">*</sup>仓库：</label>
                    <div class="inline-block">
                      <div v-if="warehouseList.length == 0">
                        <label class="payment">
                          <i class="fa fa-warning"></i>
                          请添加仓库
                          <router-link to="/v1/goods/category/getList" class="text-red text-bold">【立即添加】</router-link>
                        </label>
                      </div>
                      <select v-else class="form-control" v-model="editForm_whOutVO.whId">
                        <option value="0" v-if="editForm_whOutVO.whId">请选择</option>
                        <option :value="editForm_whOutVO.whId" v-else>请选择</option>
                        <option v-for="(warehouseItem,index) in warehouseList"
                                :value="warehouseItem.id">{{warehouseItem.name}}
                        </option>
                      </select>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label  class="col-sm-12">
                    <a v-if="editForm_whOutVO.whId" class="btn btn-primary pull-left m-r-10" data-toggle="modal"
                       data-target="#modal-default1" @click="addProduct(0)">添加产品</a>
                    <a v-else class="btn btn-primary pull-left m-r-10" data-toggle="modal"
                       @click="addProduct(0)">添加产品</a>
                  </label>
                </div>
                <div class="clearfix row">
                  <div class="col-sm-12">
                    <table class="table table-bordered table-hover marginNonde">
                      <thead>
                      <tr>
                        <th>商品图片</th>
                        <th>商品信息</th>
                        <th>库存</th>
                        <th>出库数量</th>
                        <th>操作</th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr v-if="editForm_whOutListVOs.length == 0">
                        <td colspan="5">
                          没有数据
                        </td>
                      </tr>
                      <tr v-else ref="trItem" v-for="(editFormItem, index) in editForm_whOutListVOs" :key="index">
                        <td>
                          <img v-if="editFormItem.goodPic" :src="editFormItem.goodPic" alt="">
                          <img v-else src="@/assets/noPic.png" alt="">
                        </td>
                        <td class="text-left p-l-20">
                          <label class="m-l-15">
                            <input type="hidden" v-model="editFormItem.goodId"/>
                            <p>
                              <label>商品编码：</label>
                              <span>{{editFormItem.sku}}</span>
                            </p>
                            <p>
                              <label>商品名称：</label>
                              <span>{{editFormItem.goodName}}</span>
                            </p>
                            <p>
                              <label>品牌名称：</label>
                              <span>{{editFormItem.brandName}}</span>
                            </p>
                          </label>
                        </td>
                        <td>
                          <p class="p-tb-8">
                            {{editFormItem.countStock}}
                          </p>
                        </td>
                        <td>
                          <p class="p-tb-8" v-for="(stockItem, stockIndex) in editFormItem.stockVOs" :key="stockIndex">
                            <input type="text"  class="form-control"
                                   style="width: 120px;display: inline-block;" v-model="stockItem.sendQty">
                          </p>

                        </td>
                        <td>
                          <a href="javascript:;" class="text-green" @click="deleteOutboundItem(index)">删除</a>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" @click="submitOutbound()">保存</button>
            <button type="button" class="btn btn-default" data-dismiss="modal" @click="clearForm()">关闭
            </button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>

    <div class="modal fade" id="modal-detail">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">出库单详情</h4>
          </div>
          <div class="modal-body">
            <div class="form-horizontal max_height">
              <div class="clearfix">
                <div class="form-group">
                  <div class="col-sm-4 flex" v-if="editNo">
                    <label for="" class="control-label bg-gray min-width">出库单编号：</label>
                    <label for="" class="control-label">{{editNo}}</label>
                  </div>
                  <div class="col-sm-4 flex">
                    <label for="" class="min-width bg-gray control-label">出库类型：</label>
                    <label for="" class="control-label">{{returnOutboundType("3")}}</label>
                  </div>
                  <div class="col-sm-4 flex">
                    <label for="" class="min-width bg-gray control-label"><sup class="text-red">*</sup>仓库：</label>
                    <div class="inline-block">
                      <select disabled="disabled" class="form-control" v-model="editForm_whOutVO.whId">
                        <option value="0" v-if="editForm_whOutVO.whId">请选择</option>
                        <option v-for="(warehouseItem,index) in warehouseList"
                                :value="warehouseItem.id">{{warehouseItem.name}}
                        </option>
                      </select>
                    </div>
                  </div>
                </div>
                <div class="clearfix">
                  <div class="col-sm-12">
                    <table id="example4" class="table table-bordered table-hover marginNonde">
                      <thead>
                      <tr>
                        <th>商品图片</th>
                        <th>商品信息</th>
                        <th>库存</th>
                        <th v-if="showShelf">库位</th>
                        <th>出库数量</th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr ref="trItem" v-for="(editFormItem, index) in editForm_whOutListVOs" :key="index">
                        <td>
                          <img v-if="editFormItem.goodPic" :src="editFormItem.goodPic" alt="">
                          <img v-else src="@/assets/noPic.png" alt="">
                        </td>
                        <td class="text-left p-l-20">
                          <label class="m-l-15">
                            <input type="hidden" v-model="editFormItem.goodId"/>
                            <p>
                              <label>商品编码：</label>
                              <span>{{editFormItem.sku}}</span>
                            </p>
                            <p>
                              <label>商品名称：</label>
                              <span>{{editFormItem.goodName}}</span>
                            </p>
                            <p>
                              <label>品牌名称：</label>
                              <span>{{editFormItem.brandName}}</span>
                            </p>
                          </label>
                        </td>
                        <td>
                          <p class="p-tb-8">
                            {{editFormItem.countStock}}
                          </p>
                        </td>
                        <td v-if="showShelf">
                          <div class="pull-left">
                            <ul style="margin: 0;">
                              <li style="margin: 3px 0;" v-for="(stockVOItem, stockVOIndex) in editFormItem.stockVOs">
                                <div class="input-group">
                                  <select name="" style="width: 125px" class="form-control" disabled="disabled">
                                    <option>
                                      {{stockVOItem.stockNo}}({{stockVOItem.stockQty}})
                                    </option>
                                  </select>
                                </div>
                              </li>
                            </ul>
                          </div>
                        </td>
                        <td>
                          <p class="p-tb-8" v-for="(stockItem, stockIndex) in editFormItem.stockVOs" :key="stockIndex">
                            <input disabled="disabled" type="text" @change="print()" class="form-control"
                                   style="width: 120px;display: inline-block;" v-model="stockItem.sendQty">
                          </p>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal" @click="clearForm()">关闭
            </button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>

    <div class="modal fade" id="modal-confirm">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">确认出库</h4>
          </div>
          <div class="modal-body">
            <div class="form-horizontal max_height">
              <div class="clearfix">
                <div class="form-group">
                  <div class="col-sm-4 flex" v-if="editNo">
                    <label for="" class="min-width control-label">出库单编号：</label>
                    <label for="" class="control-label">{{editNo}}</label>
                  </div>
                  <div class="col-sm-4 flex">
                    <label for="" class="min-width control-label">出库类型：</label>
                    <label for="" class="control-label">{{!!editForm_whOutVO.outType?returnOutboundType(editForm_whOutVO.outType):returnOutboundType("3")}}</label>
                  </div>
                  <div class="col-sm-4 flex">
                    <label for="" class="min-width control-label"><sup class="text-red">*</sup>仓库：</label>
                    <div class="inline-block">
                      <div v-if="warehouseList.length == 0">
                        <label class="payment">
                          <i class="fa fa-warning"></i>
                          请添加仓库
                          <router-link to="/v1/goods/category/getList" class="text-red text-bold">【立即添加】</router-link>
                        </label>
                      </div>
                      <select v-else class="form-control" v-model="editForm_whOutVO.whId">
                        <option value="0" v-if="editForm_whOutVO.whId">请选择</option>
                        <option :value="editForm_whOutVO.whId" v-else>请选择</option>
                        <option v-for="(warehouseItem,index) in warehouseList"
                                :value="warehouseItem.id">{{warehouseItem.name}}
                        </option>
                      </select>
                    </div>
                  </div>
                </div>
                <div class="clearfix">
                  <div class="col-sm-12">
                    <table class="table table-bordered table-hover marginNonde">
                      <thead>
                      <tr>
                        <th>商品图片</th>
                        <th>商品信息</th>
                        <th v-if="editNo">货架位</th>
                        <th v-else>库存</th>
                        <th>出库数量</th>
                        <th v-if="editNo">小计</th>
                        <th>操作</th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr ref="trItem" v-for="(editFormItem, index) in editForm_whOutListVOs" :key="index">
                        <td>
                          <img v-if="editFormItem.goodPic" :src="editFormItem.goodPic" alt="">
                          <img v-else src="@/assets/noPic.png" alt="">
                        </td>
                        <td class="text-left" style="padding-left: 10px;">
                          <label class="m-l-15">
                            <input type="hidden" v-model="editFormItem.goodId"/>
                            <p>
                              <label>商品编码：</label>
                              <span>{{editFormItem.sku}}</span>
                            </p>
                            <p>
                              <label>商品名称：</label>
                              <span>{{editFormItem.goodName}}</span>
                            </p>
                            <p>
                              <label>品牌名称：</label>
                              <span>{{editFormItem.brandName}}</span>
                            </p>
                          </label>
                        </td>
                        <td>
                          <div class="pull-left">
                            <ul style="margin: 0;">
                              <li style="margin: 3px 0;" v-for="(i, indexLn) in editFormItem.selectSize">
                                <div class="input-group">
                                  <select name="" style="width: 125px" class="form-control">
                                    <option v-for="(stockVOItem, stockVOIndex) in editFormItem.stockVOs"
                                            :value="stockVOItem.id" :key="stockVOIndex">
                                      {{stockVOItem.stockNo}}({{stockVOItem.stockQty == null?0:stockVOItem.stockQty}})
                                    </option>
                                  </select>
                                  <span class="input-group-addon curren" @click="deleteShelf(index)"><i
                                    class="fa fa-remove"></i></span>
                                  <i class="fa fa-plus pull-right addPos" @click="addShelf(editFormItem.stockVOs.length,index)"></i>
                                </div>
                              </li>
                            </ul>
                          </div>
                        </td>
                        <td>
                          <p class="p-tb-8" v-for="(i, indexLn) in editFormItem.selectSize">
                            <input type="text" class="form-control" style="width: 120px;display: inline-block;"
                                   v-model="editFormItem.stockVOs[indexLn].sendQty">
                          </p>
                        </td>
                        <td v-if="editNo">
                          {{editFormItem.viewCount}}
                        </td>
                        <td>
                          <a href="javascript:;" class="text-green" @click="deleteOutboundItem(index)">删除</a>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" @click="submitOutWh()">保存</button>
            <button type="button" class="btn btn-default" data-dismiss="modal" @click="clearForm()">关闭
            </button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>

    <div class="modal fade" id="modal-default1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">选择商品</h4>
          </div>
          <div class="modal-body">
            <div class="form-horizontal">
              <div class="clearfix">
                <div class="clearfix">
                  <div class="col-sm-12 flex">
                    <label for="" class="control-label min-width">输入搜索：</label>
                    <div class="inline-block">
                      <input type="text" class="form-control pull-left" style="width: 350px" v-model="chooseProParmas.sku" placeholder="请输入货号">
                      <button class="btn bg-green pull-left m-lr-10" @click="searchProduct">搜&nbsp;索</button>
                      <button class="btn btn-danger pull-left m-lr-10" @click="resetProduct">重&nbsp;置</button>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label for="" class="col-sm-12">
                    <!--<button type="button" class="btn btn-success pull-left m-r-10" data-toggle="modal" data-target="#modal-default">创建调拨单</button>-->
                  </label>
                </div>
                <div class="clearfix">
                  <div class="col-sm-12">
                    <table id="example5" class="table table-bordered table-hover marginNonde">
                      <thead>
                      <tr>
                        <th>
                          <label>
                            <!--<input type="checkbox" class="flat-red">-->
                          </label>
                        </th>
                        <!--<th>商品图片</th>-->
                        <th>商品信息</th>
                        <th>可用库存</th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr v-if="addProductList.length == 0">
                        <td colspan="3">没有数据</td>
                      </tr>
                      <tr v-else v-for="(addProductListItem, index) in addProductList">
                        <td>
                          <label>
                            <input type="checkbox" class="flat-red" :value="addProductListItem"
                                   v-model="checkedProduct">
                          </label>
                        </td>
                        <td class="text-left p-l-20" style="padding-left: 20px;">
                          <img v-if="addProductListItem.goodsPic" :src="addProductListItem.goodsPic" alt="">
                          <img v-else src="@/assets/noPic.png" alt="">
                          <label class="m-l-15">
                            <p>
                              <label>商品编码：</label>
                              <span>{{addProductListItem.sku}}</span>
                            </p>
                            <p>
                              <label>商品名称：</label>
                              <span>{{addProductListItem.goodsName}}</span>
                            </p>
                            <p>
                              <label>品牌名称：</label>
                              <span>{{addProductListItem.brandName}}</span>
                            </p>
                          </label>
                        </td>
                        <td>
                          {{addProductListItem.countStock}}
                        </td>
                      </tr>
                      </tbody>
                    </table>
                    <div class="clearfix" v-if="addProductList.length != 0">
                      <div class="m-t-15 pull-right">
                        <pagination :total="inventory.total" :current-page='inventory.pageNum'
                                    :display="inventory.dispaly"
                                    @pagechange="pagechange1"></pagination>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary"  @click="addProductSubmit()">保存</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
  </section>
</template>

<script>
  import instance from '@/api/index.js';
  import pagination from '@/components/common/pageComponent';

  export default {
    name: "outboundManager",
    data() {
      return {
        message : '',
        showShelf:false,
        activeOutboundWh: -1,//仓库位置addClass样式
        outboundState: [{name: '全部', status: null}, {name: '待出库', status: "1"}, {name: '已出库', status: "2"},
          {name: '已取消', status: "3"}],//出库状态
        activeOutboundState: 0,//出库状态addClass样式
        status: "",//出库状态
        show: false,//loading加载
        checked: false,
        checkList: [],//全选/反选获取的id
        outboundParam: {},//提交时传递的值
        outboundList: [],//出库单列表
        addProductList: [],//获取添加产品列表

        outboundStatus: new Map(),  //出库状态
        outboundType: new Map(),

        editNo: "",
        editForm_whOutVO: {},
        editForm_whOutListVOs: [],

        checkedProduct: [],//选择产品checkbox
        checkedProductList: [],//选择产品列表

        selected: "",    //下拉框默认选中
        outConfirmparam: {},//编辑传递的值
        outConfirmSubimt: [],//编辑保存
        seavoutConfirm: [],//保存编辑行数据的数据
        createTransfer: {},//创建调拨单
        whAllotLists: [],//调拨单明细对象
        qty: [],//调拨数量
        warehouseList: [],//获取用户可查看仓库

        foreachIndex: 0,
        stockList: [],
        stockSelectList: [], //货架下拉框

        selectedStorck: {//选择仓库
          storck: "",//仓库
          note: "",//备注
        },

        pages: {
          outboundPageList: {
            total: 0,
            pageNum: 1,
            display: 10
          },
          productList: {
            total: 0,
            pageNum: 1,
            display: 5
          },
        },//分页
        inventory: {
          total: 0,
          pageNum: 1,
          dispaly: 5
        },
        readonly: false,//确认入库显示元素
        storageObj: {},
        storageMap: new Map(),
        storageList: [],
        okOutWhListVOS: {},//确认出库提交
        chooseProParmas:{},
      }
    },
    computed: {
      // mapComputed () {
      //   let i = 0;
      //   return i++
      // }
    },
    watch: {
      storageObj: {
        handler(newValue, oldVlaue) {
          console.log(newValue)
        },
        deep: true
      }
    },
    methods: {
      getSizeId:function(index){
        return "size_" +index
      },
      alertMessage: function (value) {
        let type = 'success'
        if (!value.success) {
          type = 'error'
        }
        this.$message({
          showClose: false,
          message: value.msg,
          type: type
        });
      },
      //清空表单
      clearForm: function () {
        this.editNo = "";
        this.editForm_whOutVO = {};
        this.editForm_whOutListVOs = [];
      },
      // 获取分页
      pagechange: function (currentPage) {
        this.outboundParam.page = currentPage;
        this.pages.outboundPageList.pageNum = currentPage;
        this.getOutboundListFn();
      },
      pagechange1: function (currentPage) {
        this.chooseProParmas.page = currentPage;
        this.inventory.pageNum = currentPage;
        this.addProduct(0);
      },

      //获取出库单列表
      getOutboundListFn: function () {
        let vm = this;
        vm.outboundParam.rows = 20;
        vm.show = true;
        instance.post('/v1/whReceiptProcess/getWareHouserOutList', vm.outboundParam).then(function (data) {
          vm.outboundList = data.data.data.list;
          vm.pages.outboundPageList.total = data.data.data.total;
          console.log(data)
          vm.show = false;//loading加载
        })
      },

      //选择仓库位置
      chooseOutboundWh: function (_whId, index) {
        this.activeOutboundWh = index;
        this.outboundParam.whId = _whId;
        this.getOutboundListFn();
      },

      //选择出库状态
      chooseOutboundStatus: function (index, status) {
        this.activeOutboundState = index;
        this.outboundParam.outStatus = status;
        this.getOutboundListFn();
      },

      // 搜索出库单号
      searchOutboundByNum: function () {
        // this.outboundParam.num = this.outboundList.outNum;
        this.getOutboundListFn();
      },

      //重置
      resetOutBound: function () {
        delete this.outboundParam.outNum;
        this.activeOutboundWh = -1;
        this.activeOutboundState = 0;
        this.outboundParam.outStatus = null;
        this.outboundParam.whId = null;
        this.getOutboundListFn();
      },

      //搜索产品
      searchProduct:function(){
        this.addProduct();
      },

      //重置
      resetProduct:function(){
        this.chooseProParmas.sku = '';
        this.addProduct();
      },

      //获取用户可查看仓库
      getUserWareHouseListFn: function () {
        const vm = this;
        instance.post('/v1/warehouse/getUserWareHouseList').then(function (data) {
          vm.warehouseList = data.data.data;
        })
      },

      //打开编辑窗口
      toEdit: function (num) {
        const vm = this;
        vm.readonly = true;
        vm.editNo = num;
        instance.post('/v1/whReceiptProcess/getWareHouserOut', {outNum: num}).then(function (data) {
          vm.editForm_whOutVO = data.data.data.whOutVO;
          vm.editForm_whOutListVOs = data.data.data.whOutListVOs;

          for (let i = 0; i < vm.editForm_whOutListVOs.length; i++) {
            vm.editForm_whOutListVOs[i].viewCount = 0;
            for (let j = 0; j < vm.editForm_whOutListVOs[i].stockVOs.length; j++) {
              if(j>0){
                vm.showShelf=true;
              }
              let currentQty = vm.editForm_whOutListVOs[i].stockVOs[j].sendQty;
              vm.editForm_whOutListVOs[i].viewCount = vm.editForm_whOutListVOs[i].viewCount + currentQty;//vm.editForm_whOutListVOs.viewCount + currentQty;
            }
          }
          console.log(data.data.data)
        });
      },

      //打开确认出库弹窗
      toOutConfirm: function (num) {
        const vm = this;
        vm.readonly = false;
        vm.foreachIndex = 0;
        vm.editNo = num;
        vm.stockSelectSize  = [];
        instance.post('/v1/whReceiptProcess/getWareHouserOut', {outNum: num}).then(function (data) {
          vm.editForm_whOutVO = data.data.data.whOutVO;
          var whOutList = data.data.data.whOutListVOs;
          vm.getStockInOutList(whOutList);
        });
      },
      //库位请求放入确认出库列表
      getStockInOutList:function(list){
        let vm  = this;

        instance.post('/v1/warehouse/getWareHouseStockList', {whId: vm.editForm_whOutVO.whId, sku: list[vm.foreachIndex].sku}).then(function (data) {
          //把库位赋值给库位对象
          list[vm.foreachIndex].stockVOs = data.data.data;
          list[vm.foreachIndex].selectSize = 1;
          vm.foreachIndex++;
          if(list[vm.foreachIndex]){
            vm.getStockInOutList(list);
          }else {
            vm.editForm_whOutListVOs =list;
            // alert(JSON.stringify(vm.editForm_whOutListVOs));
          }
        });
      },


      // 确认出库提交
      submitOutWh: function () {
        let vm = this;
        vm.okOutWhListVOS.whOutLists = [];
        for (let i = 0; i < vm.editForm_whOutListVOs.length; i++) {
          var count = 0;
          for (let j = 0; j < vm.editForm_whOutListVOs[i].selectSize; j++) {
            let outObj = {};
            outObj.goodId = vm.editForm_whOutListVOs[i].goodId;
            if (!vm.editForm_whOutListVOs[i].stockVOs[j].sendQty || vm.editForm_whOutListVOs[i].stockVOs[j].sendQty == 0) {
              vm.$alert('请输入正确的出库数量！', '提示', {
                confirmButtonText: '确定',
              });
              return;
            } else {
              outObj.stockId = vm.editForm_whOutListVOs[i].stockVOs[j].id;
              outObj.qty = vm.editForm_whOutListVOs[i].stockVOs[j].sendQty;
              outObj.stockNo = vm.editForm_whOutListVOs[i].stockVOs[j].stockNo;
              count = Number(count) + Number(outObj.qty);
              vm.okOutWhListVOS.whOutLists.push(outObj);
            }
          }
          if (count != vm.editForm_whOutListVOs[i].viewCount) {
            vm.$alert('请输入正确的出库数量！', '提示', {
              confirmButtonText: '确定',
            });
            return;
          }
        }
        vm.okOutWhListVOS.whOut = vm.editForm_whOutVO;
        vm.okOutWhListVOS.whOut.outStatus = 2;
        delete vm.okOutWhListVOS.whOut.whName;
        $('#modal-confirm').modal('hide');
        instance.post('/v1/whReceiptProcess/okWareHouserOut', vm.okOutWhListVOS).then(function (data) {
          vm.alertMessage(data.data)
          vm.getOutboundListFn();
        })
      },

      //添加货架
      addShelf: function (size,index) {
        let vm = this;
        vm.editForm_whOutListVOs[index].selectSize++;
        if(vm.editForm_whOutListVOs[index].selectSize>size){
          vm.editForm_whOutListVOs[index].selectSize = size;
          return ;
        }
      },

      //删除货架
      deleteShelf: function (index) {
        let vm = this;
        vm.editForm_whOutListVOs[index].selectSize--;
        if (vm.editForm_whOutListVOs[index].selectSize<1){
          vm.editForm_whOutListVOs[index].selectSize = 1;
          return;
        }
      },

      //添加产品
      addProduct: function (_type) {
        let vm = this;
        if(_type == 0){
          this.chooseProParmas.sku = '';
        }
        this.checkedProduct = [];
        if (!vm.editForm_whOutVO.whId) {
          this.$message({
            showClose: true,
            message: '请先选择仓库!',
            type: 'warning'
          });
          return;
        }
        vm.chooseProParmas.page = vm.inventory.pageNum;
        vm.chooseProParmas.rows = 5;
        vm.inventory.dispaly = vm.chooseProParmas.rows;
        vm.chooseProParmas.whId = vm.editForm_whOutVO.whId;
        instance({
          method:'post',
          url:'/v1/warehouse/getStockList',
          data:vm.chooseProParmas
        }).then(function (data) {
          if(data.data.success){
            vm.addProductList = data.data.data.list;
            vm.inventory.total = data.data.data.total;
            console.log(data)
          }
        });
      },

      //添加产品提交
      addProductSubmit: function () {
        if(this.checkedProduct.length == 0){
          this.$alert('至少选择一个商品！', '提示', {
            confirmButtonText: '确定',
          });
          return;
        }
        for (let i = 0; i < this.checkedProduct.length; i++) {
          let checkItem = {};
          checkItem.goodId = this.checkedProduct[i].id;
          checkItem.goodPic = this.checkedProduct[i].goodsPic;
          checkItem.goodName = this.checkedProduct[i].goodsName;
          checkItem.sku = this.checkedProduct[i].sku;
          checkItem.brandName = this.checkedProduct[i].brandName;
          checkItem.countStock = this.checkedProduct[i].countStock;
          checkItem.stockVOs = [];
          let stockVO = {};
          stockVO.sendQty = 0;
          checkItem.stockVOs.push(stockVO);
          let matchTag = true;
          for (let j = 0; j < this.editForm_whOutListVOs.length; j++) {
            let whOutItem = this.editForm_whOutListVOs[j];
            if (this.checkedProduct[i].id == whOutItem.goodId) {
              matchTag = false;
              break;
            }
          }
          if (matchTag) {
            this.editForm_whOutListVOs.push(checkItem);
          }
        }
        $("#modal-default1").modal('hide');
      },

      //提交保存创建/修改出库单
      submitOutbound: function () {
        let postUrl = "";
        const vm = this;
        let commitForm = {};
        commitForm.whOut = {};
        commitForm.whOutLists = [];
        if (vm.editForm_whOutVO.outNum) {
          commitForm.whOut.outNum = vm.editForm_whOutVO.outNum;
          commitForm.whOut.outType = 3;
          commitForm.whOut.outStatus = 1;//vm.editForm_whOutVO.outStatus;
        } else {
          commitForm.whOut.outType = 3;
          commitForm.whOut.outStatus = 1;
        }
        if(!vm.editForm_whOutVO.whId){
          vm.$alert('请选择仓库！', '提示', {
            confirmButtonText: '确定',
          });
          return;
        }
        commitForm.whOut.whId = vm.editForm_whOutVO.whId;
        commitForm.whOut.voucher = vm.editForm_whOutVO.voucher;

        var qtyCount = 0;
        for (let i = 0; i < vm.editForm_whOutListVOs.length; i++) {
          if (vm.editForm_whOutListVOs[i].stockVOs) {
            //确认出库时，需指定货架
            for (let j = 0; j < vm.editForm_whOutListVOs[i].stockVOs.length; j++) {
              let obj = {};
              obj.goodId = vm.editForm_whOutListVOs[i].goodId;
              obj.qty = vm.editForm_whOutListVOs[i].stockVOs[j].sendQty;
              if(obj.qty == 0 || obj.qty > vm.editForm_whOutListVOs[i].countStock){
                vm.$alert('请输入正确的出库数量！', '提示', {
                  confirmButtonText: '确定',
                });
                return;
              }
              qtyCount = qtyCount + obj.qty;
              if (vm.editForm_whOutVO.outNum) {
                obj.stockId = vm.editForm_whOutListVOs[i].stockVOs[j].stockId;
                obj.stockNo = vm.editForm_whOutListVOs[i].stockVOs[j].stockNo;
              }
              commitForm.whOutLists.push(obj);
            }
          } else {
            let obj = {};
            obj.goodId = vm.editForm_whOutListVOs[i].goodId;
            obj.qty = vm.editForm_whOutListVOs[i].sendQty;
            if(obj.qty == 0 || obj.qty > vm.editForm_whOutListVOs[i].countStock){
              vm.$alert('请输入正确的出库数量！', '提示', {
                confirmButtonText: '确定',
              });
              return;
            }
            qtyCount = qtyCount + parseInt(obj.qty);
            commitForm.whOutLists.push(obj);
          }

        };
        if(commitForm.whOutLists.length == 0){
          vm.$alert('请添加出库商品！', '提示', {
            confirmButtonText: '确定',
          });
          return;
        }
        $('#modal-create').modal('hide');
        commitForm.whOut.total = qtyCount;
        if (!!commitForm.whOut.outNum) {
          postUrl = '/v1/whReceiptProcess/updateWareHouserOut';
        } else {
          postUrl = '/v1/whReceiptProcess/addWareHouserOut';
        }
        ;

        this.print();
        instance.post(postUrl, commitForm).then(function (data) {
          console.log(data)
          vm.clearForm();
          vm.alertMessage(data.data);
          vm.getOutboundListFn();
        }).catch(function (err) {
          console.log(err)
        })
      },

      //删除
      deleteOutboundItem: function (index) {
        this.editForm_whOutListVOs.splice(index, 1);
      },


      //取消出库单
      outCancel: function (id) {
        let vm = this;
        vm.$confirm('此操作将取消出库单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          instance.post('/v1/whReceiptProcess/cancelWareHouserOut/' + id).then(function (data) {
            vm.alertMessage(data.data);
            vm.getOutboundListFn();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
      },
      //调拨数量
      print: function () {
        let vm = this;
        for (let n = 0; n < vm.editForm_whOutListVOs.length; n++) {
          let currentItem = vm.editForm_whOutListVOs[n];
          if (currentItem) {
            for (let j = 0; j < currentItem.stockVOs.length; j++) {
              if (currentItem.stockVOs) {
                if (currentItem.stockVOs[j].sendQty > vm.editForm_whOutListVOs[n].countStock) {
                  currentItem.stockVOs[j].sendQty = vm.editForm_whOutListVOs[n].countStock;
                }
              }
            }
          }
        }
      },
      //创建出库单
      toCreate: function () {
        const vm = this;
        vm.readonly = true;
        vm.editForm_whOutVO = {};
        vm.editNo = '';
        vm.editForm_whOutListVOs = [];
      },

      //全选反选
      checkedAll: function () {
        var vm = this;
        if (vm.checked) { //实现反选
          vm.checkList = [];
        } else { //实现全选
          vm.checkList = [];
          vm.getOutboundList.forEach(function (item, index) {
            if (index >= 0) {
              vm.checkList.push(item.num);
            }
          });
        }
      },

      //行数据选择框
      checkedItem: function (e) {
        this.checkList.push(e.target.value)
      },

      //导入导出
      exportInfo: function () {
        if (this.checkList.length == 0) {
          alert("请选择")
        } else {
          alert("导入导出中...")
        }
      },

      //打印调拨单
      printAllocate: function () {
        if (this.checkList.length == 0) {
          alert("请选择")
        } else {
          alert("导入导出中...")
        }
      },

      returnOutboundStatus: function (_key) {
        return this.outboundStatus.get(_key);
      },
      returnOutboundType: function (_key) {
        return this.outboundType.get(_key);
      }

    },
    created: function () {
      //出库单状态
      this.outboundStatus.set("1", "待出库");
      this.outboundStatus.set("2", "已出库");
      this.outboundStatus.set("3", "已取消");

      this.outboundType.set("1", "发货出库");
      this.outboundType.set("2", "调拨出库");
      this.outboundType.set("3", "其他出库");
      this.getOutboundListFn();
      this.getUserWareHouseListFn();
    },
    components: {
      pagination
    }
  }


</script>

<style scoped>
</style>
